<template>
  <div class="group_detail" ref="group_detail">
    <div class="group_top">
      <div class="group_name" v-show="!remarkGroup">
        <div class="name_text">{{$store.state.groupName}}</div>
        <img class="editor_icon" src="../../assets/icons/icon_modify_up.png" @click.stop="remarkName"/>
      </div>
      <div class="group_editor" v-show="remarkGroup">
        <input class="remark_input" type="text" maxlength="30" v-model="groupRemarkText"/>
        <div class="edit_confirm" @click.stop="comfirmRemark"></div>
      </div>
      <div class="group_operate">
        <!-- <div class="qrcode_icon" @click="openQrcode"></div> -->
        <el-popover
            placement="bottom-end"
            width="365"
            trigger="click">
            <div class="group_set">
              <!-- <div class="set_line">
                <div class="set_title">开启成员邀请</div>
                <el-switch v-model="membersInvite" @change="changeMembersInvite" :width="28"></el-switch>
              </div>
              <div class="set_line">
                <div class="set_title">邀请审核</div>
                <el-switch v-model="inviteExamine" @change="changeInviteExamine" :width="28"></el-switch>
              </div>
              <div class="set_line" v-if="$store.state.isQunzhu||$store.state.isGuanli">
                <div class="set_title">全员禁言</div>
                <el-switch v-model="allBan" @change="changeAllBan" :width="28"></el-switch>
              </div>
              <div class="set_line" v-if="$store.state.isQunzhu||$store.state.isGuanli">
                <div class="set_title">禁言名单</div>
                <div class="ban_num" @click="openBanMembersList">0人></div>
              </div>
              <div class="set_line">
                <div class="set_title">群内互加好友</div>
                <el-switch v-model="addFriendAllow" @change="changeAddFriendAllow" :width="28"></el-switch>
              </div> -->
              
              <div class="group_btns">
                <div class="group_button" @click="openQuitGroup">退出群</div>
                <div class="group_button" @click="openBreakGroup" v-if="$store.state.isQunzhu">解散群</div>
                <!-- <div class="group_button" @click="openOverGroup" v-if="$store.state.isQunzhu">转让群</div> -->
              </div>
            </div>
            <img class="set_icon" slot="reference" src="../../assets/icons/icon_setup_up.png" />
        </el-popover>
      </div>
    </div>

    <div class="detail_box">
      <ul class="group_members">
        <div class="member_block" @click="addMembers">
          <div class="operate_member">
              <img class="operate_member_img" src="../../assets/icons/icon_add_up.png"/>
          </div>
          <div class="member_name">添加</div>
        </div>
        <div class="member_block" @click="reduceMembers">
          <div class="operate_member">
            <img class="operate_member_img" src="../../assets/icons/icon_minus_up.png"/>
          </div>
          <div class="member_name">删除</div>
        </div>

        <el-popover v-for="(item,index) in $store.state.groupMembersList"
            :key="index"
            placement="bottom-end"
            width="280"
            trigger="click">
            <userInfo />
            <li class="member_block" slot="reference" @contextmenu.prevent="getItem(item,$event)" @click="chooseCard(item)">
              <img class="reduce_icon member_avatar" :src="item.userHeadImg"/>
              <div class="member_name">{{item.userName}}</div>
              <img class="qunzhu" src="../../assets/qunzhu.png" v-if="item.userRole==99">
              <img class="qunzhu" src="../../assets/qunguan.png" v-if="item.userRole==1">
            </li>
        </el-popover>
      </ul>

      <div class="group_info">
        <div class="info_line">
          <div class="info_title">群简介</div>
          <div class="info_value">{{$store.state.groupRemarks}}</div>
          <img class="edit_pic" src="../../assets/icons/icon_modify_hover.png" @click="openBrief"/>
        </div>
        <div class="info_line">
          <div class="info_title">群公告</div>
          <div class="info_value">{{$store.state.groupNotice}}</div>
          <img class="edit_pic" src="../../assets/icons/icon_modify_hover.png" @click="openNotice"/>
        </div>
        <div class="info_line">
          <div class="info_title">群昵称</div>
          <div class="info_value">{{$store.state.groupName}}</div>
          <img class="edit_pic" src="../../assets/icons/icon_modify_hover.png" @click="openNick"/>
        </div>
      </div>

      <div class="btns">
        <!-- <div class="primarybtn default" @click="sendCard">分享群聊</div> -->
        <div class="primarybtn" @click="transMessage">发消息</div>
      </div>
      
      <shareCard :shareCardState="shareCardState" v-show="shareCardState" @changeShareCardState="changeShareCardState" />
    </div>

    <ul class="contextmenu" v-if="contextmenuState" ref="contextmenuEle">
      <li class="context_select" v-if="isFriend" @click="transMessagePeople">发消息</li>
      <!-- <li class="context_select" @click="sendCard">发名片</li> -->
      <li class="context_select" v-if="$store.state.isQunzhu&&(chooseItem.userRole!=1&&chooseItem.userRole!=99)" @click="upManagerRole">设置管理员</li>
      <li class="context_select" v-if="$store.state.isQunzhu&&chooseItem.userRole==1" @click="upManagerRole">取消管理员</li>
      <!-- <li class="context_select" @click="openBanTime">禁言</li> -->
      <!-- <li class="context_select" v-if="($store.state.isQunzhu&&chooseItem.userRole!=99&&chooseItem.forbidSpeech===0)||($store.state.isGuanli&&chooseItem.userRole!=99&&chooseItem.userRole!=1&&chooseItem.forbidSpeech===0)" @click="notAllowSpeak">禁言</li> -->
      <!-- <li class="context_select" @click="openRemoveBanDialog">取消禁言</li> -->
      <!-- <li class="context_select" v-if="($store.state.isQunzhu&&chooseItem.userRole!=99&&chooseItem.forbidSpeech===1)||($store.state.isGuanli&&chooseItem.userRole!=99&&chooseItem.userRole!=1&&chooseItem.forbidSpeech===1)" @click="allowSpeak">取消禁言</li> -->
      <li class="context_select" v-if="($store.state.isQunzhu&&chooseItem.userRole!=99)||($store.state.isGuanli&&chooseItem.userRole!=99&&chooseItem.userRole!=1)" @click="openDelete">移出群聊</li>
    </ul>

    <qrcode :showQrcode="showQrcode" @cancelQrcode="cancelQrcode" />
    <groupDialog :propData="propData" @changePropData="changePropData"/>
    <chooseMembers :chooseUserData="chooseUserData" v-show="chooseUserData.chooseUserState" @changeChooseState="changeChooseState"/>
  </div>
</template>

<script>
import qrcode from '../qrcode'
import userInfo from '../user_info'
import shareCard from '../share_card'
import chooseMembers from '../choose_members'
import groupDialog from '../group_dialog'
import {Popover,Dialog,Switch,Message} from 'element-ui'
import {upNoticeRemarks,upnickSet,roomChatList,chatList,groupMemberList,upnickNameRole} from '../../api/api'
import bus from '../../bus'
export default {
  name:'group_detail',
  data(){
      return {
        chooseUserData:{
          type:'',
          chooseUserState:false
        },
        showQrcode:false,
        shareCardState:false,
        remarkGroup:false,
        contextmenuState:false,
        membersInvite:false,
        inviteExamine:false,
        allBan:false,
        addFriendAllow:false,
        groupRemarkText:'',
        isFriend:false,
        propData:{//子组件弹窗状态
          briefDialogState:false,
          noticeDialogState:false,
          nickDialogState:false,
          banDialogState:false,
          deleteDialogState:false,
          quitDialogState:false,
          breakDialogState:false,
          overDialogState:false,
          banMembersDialogState:false,
          removeBanDialogState:false
        },
        chooseItem:''
      }
  },
  components: {
    qrcode,
    userInfo,
    shareCard,
    groupDialog,
    chooseMembers,
    'el-dialog':Dialog,
    'el-popover':Popover,
    'el-switch':Switch
  },
  mounted(){
    bus.$on('close',msg => {
      this.contextmenuState = msg
    })
  },
  methods:{
    //选择卡片
    chooseCard(item){
      this.$store.commit('getCardItem',item)
    },
    //点击发送消息按钮
    transMessagePeople(){
      let params = {
          sendUserId:this.$store.state.user.id,
          toId:this.chooseItem.userId,
          globalId:0,
          pageSize:100
      }
      chatList(params)
      .then(res => {
        if(res.data&&res.data.data.list&&res.data.data.list.length!=0){
          var newChat = res.data.data.list[0]
          if(newChat.sendUserId!=this.$store.state.user.id){
            var toId = newChat.toId
            var toUserImg = newChat.toUserImg
            var toUserName = newChat.toUserName

            newChat.toId = newChat.sendUserId
            newChat.toUserImg = newChat.sendUserImg
            newChat.toUserName = newChat.sendUserName

            newChat.sendUserId = toId
            newChat.sendUserImg = toUserImg
            newChat.sendUserName = toUserName
          }
        }else{
          var newChat = {
            content: "",
            contentImg: "",
            contentVideo: "",
            globalId: "",
            id: 0,
            index: 0,
            messageId: 1,
            messageType: 1,
            mine: 0,
            readStatus: 0,
            sendTime: "",
            sendUserId: this.$store.state.user.id,
            sendUserImg: this.$store.state.user.headImg,
            sendUserName: this.$store.state.user.userName,
            serviceTime: "",
            toId: this.chooseItem.userId,
            toUserImg: this.chooseItem.userHeadImg,
            toUserName: this.chooseItem.userName
          }
        }
        newChat.type = 1
        this.$store.commit('setChatList',newChat)
        this.$store.commit('chooseTalk',0)
        this.$store.commit('setNav','talk')
      })
    },
    //发群聊
    transMessage(){
      let params = {
          pageNo:1,
          pageSize:500,
          globalId:0,
          sendUserId:this.$store.state.user.id,
          toId:this.$store.state.choosedGroupId
      }
      roomChatList(params)
      .then(res => {
        console.log('群聊天历史',res.data.data.list)
        if(res.data&&res.data.data.list&&res.data.data.list.length!=0){
          var newChat = res.data.data.list[0]
          if(newChat.sendUserId!=this.$store.state.user.id){
            newChat.sendUserId = this.$store.state.user.id,
            newChat.sendUserImg = this.$store.state.user.headImg
            newChat.sendUserName = this.$store.state.user.userName
          }
          newChat.toId = this.$store.state.choosedGroupId
          newChat.toUserImg = this.$store.state.groupImg
          newChat.toUserName = this.$store.state.groupName
        }else{
          var newChat = {
            content: "",
            contentImg: "",
            contentVideo: "",
            globalId: "",
            id: 0,
            index: 0,
            messageId: 1,
            messageType: 1,
            mine: 0,
            readStatus: 0,
            sendTime: "",
            sendUserId: this.$store.state.user.id,
            sendUserImg: this.$store.state.user.headImg,
            sendUserName: this.$store.state.user.userName,
            serviceTime: "",
            toId: this.$store.state.choosedGroupId,
            toUserImg: this.$store.state.groupImg,
            toUserName: this.$store.state.groupName
          }
        }
        newChat.type = 0
        this.$store.commit('setChatList',newChat)
        this.$store.commit('chooseTalk',0)
        this.$store.commit('setNav','talk')
      })
    },
    //设置或取消管理
    upManagerRole(){
      if(this.chooseItem.userRole!=1){
        var userRole = 1
      }else{
        var userRole = -1
      }
      let params = {
        userId:this.chooseItem.userId,
        roomId:this.chooseItem.roomId,
        userRole:userRole
      }
      upnickNameRole(params)
      .then(response => {
        let params1 = {
            pageNo:1,
            pageSize:500,
            roomName:this.$store.state.groupName,
            roomId:this.$store.state.choosedGroupId
        }
        //加载群成员列表
        groupMemberList(params1)
        .then(res => {
          this.$store.commit('chooseGroup',this.$store.state.choosedGroupId)
          this.$store.commit('getGroupMembersList',res.data.data.list)
        })

        Message({
          message: '修改权限成功',
          type: 'success'
        })
      })
    },
    //打开二维码
    openQrcode(){
      this.showQrcode = true
    },
    //关闭二维码
    cancelQrcode(qrCodeState){
        this.showQrcode = qrCodeState
    },
    //点击发送名片
    sendCard(){
      this.shareCardState = true
    },
    //触发发送名片弹窗
    changeShareCardState(value){
      this.shareCardState = value
    },
    remarkName(){
      this.groupRemarkText = this.$store.state.groupName
      this.remarkGroup = true
    },
    //修改备注
    comfirmRemark(){
      let params = {
        roomId:this.$store.state.choosedGroupId,
        roomName:this.groupRemarkText
      }
      upNoticeRemarks(params)
      .then(res => {
        this.$store.commit('changeGroupBase',{groupName:this.groupRemarkText})
        this.remarkGroup = false
        Message({
          message: '修改成功',
          type: 'success'
        })
      })
    },
    //禁言
    notAllowSpeak(){
      console.log(this.chooseItem)
      let params = {
        userId:this.chooseItem.userId,
        roomId:this.chooseItem.roomId,
        forbidSpeech:1//禁言传1，取消禁言传-1
      }
      upnickSet(params)
      .then(response => {

        let params1 = {
            pageNo:1,
            pageSize:500,
            roomName:this.$store.state.groupName,
            roomId:this.$store.state.choosedGroupId
        }
        //重新加载群成员列表
        groupMemberList(params1)
        .then(res => {
          this.$store.commit('getGroupMembersList',res.data.data.list)
        })

        Message({
          message: '禁言成功',
          type: 'success'
        })
      })
    },
    //取消禁言
    allowSpeak(){
      console.log(this.chooseItem)
      let params = {
        userId:this.chooseItem.userId,
        roomId:this.chooseItem.roomId,
        forbidSpeech:-1
      }
      upnickSet(params)
      .then(response => {
        let params1 = {
            pageNo:1,
            pageSize:500,
            roomName:this.$store.state.groupName,
            roomId:this.$store.state.choosedGroupId
        }
        //重新加载群成员列表
        groupMemberList(params1)
        .then(res => {
          this.$store.commit('getGroupMembersList',res.data.data.list)
        })

        Message({
          message: '取消禁言成功',
          type: 'success'
        })
      })
    },
    //打开群简介弹窗
    openBrief(){
      this.propData.briefDialogState = true
    },
    //打开群公告弹窗
    openNotice(){
      this.propData.noticeDialogState = true
    },
    //打开禁言弹窗
    openBanTime(){
      this.propData.banDialogState = true
    },
    //打开群昵称弹窗
    openNick(){
      this.propData.nickDialogState = true
    },
    //打开移除群成员确认弹窗
    openDelete(){
      // this.propData.chooseItem = this.chooseItem
      this.propData.deleteDialogState = true
    },
    //打开退出群确认弹窗
    openQuitGroup(){
      this.propData.quitDialogState = true
    },
    //打开解散群确认弹窗
    openBreakGroup(){
      this.propData.breakDialogState = true
    },
    //打开转让群弹窗
    openOverGroup(){
      this.propData.overDialogState = true
    },
    //打开禁言成员的弹窗
    openBanMembersList(){
      this.propData.banMembersDialogState = true
    },
    //打开解除禁言弹窗
    openRemoveBanDialog(){
      this.propData.removeBanDialogState = true
    },
    //添加群成员
    addMembers(){
      this.chooseUserData.type = 'addMember'
      this.chooseUserData.chooseUserState = true
    },
    //删除群成员
    reduceMembers(){
      this.chooseUserData.type = 'deleteMember'
      this.chooseUserData.chooseUserState = true
    },
    changeChooseState(value){
      this.chooseUserData = value
    },
    //一系列开关按钮
    changeMembersInvite(val){
      console.log(val)
    },
    changeInviteExamine(val){
      
    },
    changeAllBan(val){

    },
    changeAddFriendAllow(val){

    },
    changePropData(data){
      this.propData = data
    },
    getItem(item,event){
      var event = event || window.event;
      this.contextmenuState = true
      console.log(item)
      this.chooseItem = item

      this.isFriend = false
      this.$store.state.friendList.forEach((element)=>{
        if(element.friendId==item.userId){
          this.isFriend = true
        }
      })

      let posX = 0, posY = 0;
      if (event.pageX || event.pageY) {
          posX = event.pageX;
          posY = event.pageY;
      } else if (event.clientX || event.clientY) {
          posX = event.clientX
          posY = event.clientY
      }

      let top = posY - this.$refs.group_detail.offsetTop
      let left = posX - this.$refs.group_detail.offsetLeft

      this.$nextTick(()=>{
        this.$refs.contextmenuEle.style.top = top + 'px'
        this.$refs.contextmenuEle.style.left = left + 'px'
      })
    }
  }
}
</script>

<style scoped>
.group_detail{
  position:relative;
  width: 100%;
  background:rgb(243, 243, 243);
}
.group_top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0 20px;
  height:56px;
  background: white;
}
.group_operate{
  display: flex;
  justify-content: center;
  align-items: center;
}
.qrcode_icon{
  width:20px;
  height:20px;
  margin-right:17px;
  background-image: url('../../assets/icons/icon_code_up.png');
  background-size: 100%;
  cursor: pointer;
}
.qrcode_icon:hover{
  background-image: url('../../assets/icons/icon_code_hover.png');
}
.set_icon{
  width:20px;
  cursor: pointer;
  vertical-align: top;
}

.member_block{
  display: inline-block;
  padding-right: 1.9vw;
  padding-bottom: 10px;
  cursor: pointer;
  position:relative;
}
.operate_member{
  width: 30px;
  height: 30px;
  background-color: #e7e7e7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.operate_member_img{
  background-size: 100% 100%;
  width: 10px;
  height: 10px;
}
.member_avatar{
  display: block;
  width: 30px;
  height: 30px;
}
.member_name{
  font-size: 12px;
  color: #666;
  margin-top:4px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30px;
}
.qunzhu{
  position: absolute;
  width:30px;
  top:-6px;
  right:11px;
}

.detail_box{
  padding: 0 6.25vw;
}
.group_members{
  padding: 30px 10px 10px 10px;
  border-bottom: 1px solid #dcdcdc;
  overflow: auto;
  max-height: 200px;
}
.group_avatar{
  width:60px;
  height:60px;
}
.group_name,.delete_friend{
  display: flex;
  align-items: center;
}
.name_text{
  color: #333;
  font-size: 16px;
}
.editor_icon{
  width:20px;
  cursor: pointer;
}
.delete_icon{
  width:20px;
  margin-right:4px;
}
.group_editor{
  display: flex;
  align-items: center;
}
.remark_input{
  line-height: 24px;
  border: 1px solid #e7e7e7;
  background: #fff;
  border-right: 0;
  width: 136px;
  padding-left: 4px;
}
.edit_confirm{
  width: 24px;
  height: 26px;
  background: #428dfc url('../../assets/confirm.png') no-repeat 50%;
  cursor: pointer;
}
.delete_friend{
  margin-left:auto;
  cursor: pointer;
}
.delete_text{
  color:#999;
  font-size: 14px;
}
.group_info{
  padding: 20px 10px;
}
.info_line{
  line-height: 40px;
  display: flex;
  align-items: center;
}
.info_title{
  color: #999;
  font-size: 14px;
  margin-right:20px;
  white-space: nowrap;
}
.info_value{
  color: #333;
  font-size: 14px;
  line-height: initial;
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  white-space: nowrap;
}
.edit_pic{
  width:20px;
  cursor: pointer;
}
.btns{
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #dcdcdc;
  padding-top:5vh;
}
.btns .primarybtn{
  width:132px;
  height: 40px;
  line-height: 40px;
}


.contextmenu{
  width:110px;
  position: absolute;
  overflow: hidden;
  background: white;
  z-index: 20;
  top:30px;
  right:-50px;
}
.context_select{
  width:110px;
  height:40px;
  padding:0 20px;
  cursor: pointer;
  font-size:14px;
  color:#333;
  line-height: 40px;
  text-align: center;
  box-sizing: border-box;
}
.context_select:hover{
  background: #edeff3;
}
.set_line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0 20px;
  height: 40px;
}
.set_title{
  font-size: 14px;
  color:#333;
}
.ban_num{
  cursor: pointer;
  font-size: 14px;
  color:#333;
}
.group_btns{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 20px;
  padding-bottom:20px;
}
.group_button{
  width: 100px;
  height: 36px;
  color: #666;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
.group_button:hover{
  background: #4c94ff;
  color: #fff;
}
</style>